<template>
	<view class="school_content">

		<view class="card" v-for="(item,index) in list" :key="index">

			<view class="name"> 预约设备：{{item.equipe_name}}</view>
			<view class="name"> 预约时间：{{item.bookdatetime}}</view>
			<view class="name"> 预约状态：{{item.statusStr}}<text v-if="item.status==1 && item.menjin_blankuser_status==1" :data-id="item.id"  style="color: rgb(8, 112, 248);"
					@click="showqrcode">(点击显示二维码)</text></view>
			<view class="name" v-if="item.status==1"> 上机码：{{item.operate}}</view>
			<view class="name" v-if="item.status==2"> 拒绝原因：{{item.audit_desc}}</view>
			
			<view class="name" v-if="item.status==1 && item.d_time==0"> <button size="default" type="default"
					style="width:200px;font-weight:bold;color:white;background-color: #07c160;"
					@click="offline">确认下机</button></view>
		</view>
		
		<view class="weui-cell" v-if="list.length==0" style="height:100px;line-height:100px;text-align:center;display: block;">
		             
		                 暂无预约
		             
		</view>


		<view v-if="qrcodeshow==true" class="weui_dialog_confirm"
			style="border-radius: 4px;margin:0rpx 20rpx;margin-top:20%;position: fixed;z-index: 999;border:1px solide #cccccc;background-color:#e7e7e7;width: calc(100% - 40rpx);text-align: center;">
			<view class="weui_mask"></view>
			<view class="weui_dialog">
				<view class="weui_dialog_hd" style="height: 80rpx;line-height: 80rpx;"><strong class="weui_dialog_title"
						style="height: 80rpx;line-height: 80rpx;">二维码</strong></view>
				<view class="weui_dialog_bd">
					<image :src="qrcode" class="qrcode" style="width:600rpx;height: 600rpx;" />
				</view>
				<view class="weui_dialog_ft" style="height: 80rpx;line-height: 80rpx;">
					<a href="javascript:;" class="weui_btn_dialog primary"
						style="color:white;background-color:rgba(110, 110, 110, 0.692);border: 1px solid #999;padding: 8rpx 20rpx;"
						@click="closeqrcode">关闭</a>
				</view>
			</view>
		</view>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

	</view>

</template>

<script>
	export default {
		data() {
			return {

				list: [],
				id: 0,
				page: 0,
				nodatastatus: 0,
				tid: 1,
				statusStr: "",
				qrcodeshow: false,
				qrcode: "https://mbdp01.bdstatic.com/static/landing-pc/img/logo_top.79fdb8c2.png",
				errTips: "二维码加载失败",


				msgType: "success",
				messageText: "",

			}
		},
		onLoad() {
			this.getbookingList(0, 0);
		},
		methods: {
			getbookingList: function(id, page) {
				page = page + 1;
				const that = this;
				const tid = this.tid;
				let nodatastatus = this.nodatastatus;
				if (nodatastatus == 1) return;

				uni.showLoading({
					title: '加载中...',
				})

				const url = 'api/equipment/taskebookingList?id=' + id + '&page=' + page + '&tid=' + tid + '&token=' +
					uni.getStorageSync('token');
				that.$request.request(url, '', 0, 'get', false).then(res => {

					uni.hideLoading();
					let res2w = res.data;
					if (typeof res2w == 'string') {
						let str22 = res2w.replace(/\ufeff/g, ""); //去除反斜杠
						res2w = JSON.parse(str22); //string转object
					}

					if (res2w.status == 1) {
						const res2_data_data = res2w.data;


						let list = res2_data_data.list;

						let datalist = that.list;


						if (!list) list = [];
						if (list.length == 0) nodatastatus = 0;
						let lastid = 0;
						list.forEach((item, index) => {
							lastid = item.id;
							item.statusCss = 'statusauditing';
							if (item.status == 1) {
								item.statusCss = 'statusauditok';
							} else if (item.status == 2) {
								item.statusCss = 'statusauditno';
							}
							item.arrows = 'mpicon';
							datalist.push(item);

						})

						that.list = datalist
						that.page = page
						that.id = lastid
						that.nodatastatus = nodatastatus

					} else if (res2w.status == -2) {
						uni.hideLoading();
						uni.showToast({
							title: "" + res2w.msg,
							icon: 'none',
							duration: 3000,
							success: function() {

							}
						});
						uni.removeStorageSync('token');
						uni.removeStorageSync('isuser');

						setTimeout(() => {
							uni.redirectTo({
								url: '../login/index?redirect_page=myequiplist',
							})
						}, 3000);

					} else {

						uni.hideLoading();
						uni.showToast({
							title: "" + res2w.msg,
							icon: 'none',
							duration: 3000
						});
					}

				})

			},
			showqrcode: function(e) {
				let that = this;
				const id = e.target.dataset.id

				uni.showLoading({
					title: '加载中...',
				})

				const url = 'api/ebooking/showqrcode?id=' + id + '&token=' + uni.getStorageSync('token');

				that.$request.request(url, '', 0, 'get', false).then(res => {
					uni.hideLoading();
					let res2w = res.data;

					if (res2w.status == 1) {

						const res2_data_data = res2w.data.image_data;


						that.qrcode = "data:image/png;base64," + res2_data_data
						that.qrcodeshow = true

					} else {
						uni.showToast({
							title: "二维码获取失败",
							icon: 'none',
							duration: 3000
						});
					}

				})

			},

			offline: function(e) {
				let that = this;
				const id = e.target.dataset.id
				const index = e.currentTarget.dataset.index; // 获取当前点击项的索引

				const list = this.list;
				uni.showLoading({
					title: '加载中...',
				})
				const url = 'api/ebooking/offline?id=' + id + '&token=' + uni.getStorageSync('token');
				that.$request.request(url, '', 0, 'get', false).then(res => {

					uni.hideLoading();
					let res2w = res.data;
					console.log("res2w==", res2w)

					if (typeof res2w == 'string') {
						let str22 = res2w.replace(/\ufeff/g, ""); //去除反斜杠
						res2w = JSON.parse(str22); //string转object
					}

					console.log('res2w=', res2w)

					if (res2w.status == 1) {

						list[index].status = 3;
						that.list = list
						console.log('list=', list)

					} else {
						uni.showToast({
							title: "下机失败，请联系管理员",
							icon: 'none',
							duration: 3000
						});
					}
				})
			},

			onPullDownRefresh: function() {
				this.getbookingList(0, 0);
			},
			onReachBottom: function() {
				const page = this.page;
				const id = this.id;
				this.getbookingList(id, page);
			},

			closeqrcode: function() {
				this.qrcodeshow = false
			},


		}
	}
</script>

<style>
	page {}

	.school_content {
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
	}

	.card {
		display: flex;
		flex-direction: column;
		border: 0px solid #d2d2d2;
		padding: 10px 10px;
		margin: 5px 0px;
		background-color: white;

	}
	.weui-cell{
		    margin: 10px 0px;
		    padding: 10px 10px;
		    background-color: white;
		    font-size: 16px;
		    border: 0px solid #d2d2d2;
	}
</style>